<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo05</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter:0
            }
        },

        template: `
            <h2>JSPang.com</h2>
            <Counter :counter="counter" />
        `
    })
    app.component("Counter",{
        props:["counter"],
        data(){
            return{
                newCounter:this.counter
            }
        },
        template:`
            {{counter}}
            {{newCounter}}
            <button @click="Counter+=1">加</button>
            <button @click="this.newCounter+=1">加1</button>
        `   
    })
    const vm = app.mount("#app")
    //  官方的 --所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。
    //  自己的 --数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父组件传递过来的数据。
    
    //  在组件内的数据项中声明一个变量，把父组件传递过来的变量赋值给内部变量，然后就可以随意修改了。  

    //为什么要用单向数据流 机制 
    /*
            单向数据流最终的目底 是为了降低组件的 耦合度 和 独立性
    比如说：“页面上同时调用3个<counter/> 组件”没有单向数据流的机制 
    没有单项数据流的机制，很容易变成一个组件数值变化，其他组件的数值也跟着变化的现象。
    让页面组件的数据耦合在一起，没办法独立使用。
    */

    /*
        prop是单向绑定的 当父组件的属性变化时 将传递给子组件 但是不会返回来 
        这个是为了防止子组件无意修改了父组件的状态
        这样应用的数据流 难以理解 
    
        另外 当父组件更新时 子组件的所有prop 都会更新为最新值
        就是说你不应该在子组件内部改变prop 如果这么做了 vue会在控制台waring

        感个人理解 
        所谓单向数据流就是父组件的变量 子组件不能直接修改 
        而是通过迂回战术
    */
</script>

</html>